@import './mixincomponent.scss' ;
// 输入框边框颜色
$inputbordercolor: #000 ;
// 顶部线条颜色
$toplinecolor: #000 ;
// 简介的两条线颜色
$linecolor: #000 ;
//活动页列表边框的颜色
$activsbordercolor: #000 ;

@mixin bogus {
  content:'' ;
  position: absolute;
  display: block;
}

@mixin icon {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  transform: translateY(-50%);
}
.search{
  $inputheight: 60px ;
  @include w;
  box-sizing: border-box;
  padding: 2px 5px;
  position: relative;
  .input{
    @include w;
    border: 1px solid $inputbordercolor;
    border-radius: $inputheight/2;
    box-sizing: border-box;
    padding-right: $inputheight + 10;
    height: $inputheight;
    line-height: $inputheight;
  }
  .search-icon{
    @include icon ;
    left: 15px;
  }
  
  .close-icon{
    @include icon ;
    right: 5px;
  }
}

.book{
  @include w;
  box-sizing: border-box;
  padding: 2px 5px;
  display: flex;
  flex-direction: column;
  text-align: center;
  .img-warpper{
    @include w;
    height: 0;
    padding-bottom: 140%;
    overflow: hidden;
  }
  .book-img{
    width: 100%;
    // height: 100%;
  }
  .book-name{
    @include w;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


.activs{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30px;
  margin: 20px;
  // @include w;
  box-sizing: border-box;
  border: 1px solid $activsbordercolor;
  // height: 100px;
  // background-color: red;
  .active-title{
    @include w;
    @include fontLimit ;
  }
  .active-username{
    margin-left: 30px ;
    margin-right: 20px ;
    max-width: 40% ;
    @include fontLimit ;
  }
  .active-date{
    max-width: 43% ;
    @include fontLimit ;
  }
}

.line{
  $lineStyle: $toplinecolor ,1px ;
  width: 100vh;
  height: 1px;
  // background-color: $color;
  @include linePseudo($lineStyle...) ;
}
//简介条目的样式
.brief-main{
  $height: 88px ;
  $titleblockwidth: 20px ; 
  $titleblockleft: 0 ; 
  $titleblockpadding: 50px ; 
  $titleblockcolor: yellow ;
  width: 100vw;
  padding: 0 $titleblockpadding;
  @include h($height) ;
  line-height: $height;
  box-sizing: border-box;
  border: 1px solid $linecolor;
  border-width: 1px 0 1px 0;
  // @include linePseudo($lineStyle...) ;
  position: relative;
  .brief-title{
    font-weight: bold;
    &::before{
      content: '';
      display: block;
      width: $titleblockwidth;
      height: 96%;
      position: absolute;
      background: $titleblockcolor;
      top: 2%;
      left: $titleblockleft;
      box-shadow: 5px 3px 10px #000;
    }
  }
}

// @include large-text;

